<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主体页面1</title>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.12.3.min.js"></script>
    <!-- 引入下拉多选插件 -->
    <script src="./node_modules/bootstrap-select.js"></script>
    <link rel="stylesheet" href="<%=basePath%>css/node_modules/bootstrap-select.css">
    <link rel="stylesheet" href="<%=basePath%>css/index1.css">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>

<body>
    <div>
        <div class="header clearfix">
            <div class="title">EBO测试用</div>
            <div class="add">+</div>
            <div>
                <ul class="nav clearfix">
                    <a class="home" href="toIndex1">首页</a>
                    <li id="1">需求</li>
                    <li id="2">设置</li>
                </ul>
            </div>
        </div>
        <!-- 需求页面开始 -->
        <div class="content active">
            <div class="menu">
                <button>编辑</button>
                <select id="example-getting-started" class="selectpicker bla bla bli" data-live-search="true">
                    <option value="">删除</option>
                    <option value="">移动</option>
                    <option value="">复制</option>
                    <option value="">创建子需求</option>
                    <option value="">关联需求</option>
                </select>
            </div>
            <div class="menu_message">
                <div class="project_name">
                    <span>项目名称：</span>
                    <span>这就是项目</span>
                </div>
                <div class="menu_ID">
                    <span>ID:</span>
                    <span>1818</span>
                </div>
                <div class="project_state">
                    <span>状态：</span>
                    <span>规划中</span>
                </div>
            </div>
            <div class="project_content">
                <div class="project_menu">
                    <span id="1">详细信息</span>
                    <span id="2">子需求</span>
                    <span id="3">变更历史</span>
                    <span id="4">关联需求</span>
                </div>
                <div class="menu_content active">
                    兄弟 这个页面功能还没写好，别看了！！！！
                </div>
                <div class="menu_content">
                    子需求
                </div>
                <div class="menu_content">
                    变更历史
                </div>
                <div class="menu_content">
                    关联需求
                </div>
            </div>
            <div class="attachment">
                <span class="attachment_btn">附件</span>
                <span class="attachment_add">
                    <img src="images/加号.png" alt="">添加</span>
                <div class="attachment_content"></div>
                <span class="comments">评论</span>
                <span class="comments_img">
                    <img src="images/书写.png" alt="">
                </span>
                <div class="comments_content"></div>
                <div class="state_next">下一状态</div>
                <div class="state_check">
                    <input type="radio" />&nbsp;&nbsp;保持为规划中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" />&nbsp;&nbsp;实现中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" />&nbsp;&nbsp;已拒绝
                </div>
                <div class="state_content">
                    <div>处理人
                        <input type="text" class="input">
                    </div>
                    <div>
                        评&nbsp;&nbsp;&nbsp;论
                        <input type="text" class="input">
                    </div>
                </div>
                <button class="circulation">流转</button>
            </div>
        </div>
        <!-- 需求页面结束 -->
        <div class="content project_setting 1">
            <div class="lets">
                <span class="proc">
                    <h2>项目设置</h2>
                </span>
                <ul class="let clearfix">
                    <li>
                        <a href="#">项目信息</a>
                    </li>
                    <li>
                        <a href="#">应用设置</a>
                    </li>
                    <li>
                        <a href="#">成员与权限</a>
                    </li>
                    <li>
                        <a href="#">消息与报告</a>
                    </li>
                    <li>
                        <a href="findParams">其他设置</a>
                    </li>
                </ul>
            </div>
            <div class="main">请点击其他设置</div>
        </div>
        <div class="siber">
            <img class="logo" src="./images/jianzhu.png" alt="">
            <a href="#">
                <img src="./images/box.png" alt="">
            </a>
            <a href="#">
                <img src="./images/text.png" alt="">
            </a>
            <a href="#">
                <img src="./images/xiangmu.png" alt="">
            </a>
            <a href="#">
                <img src="./images/lingdang.png" alt="">
            </a>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var uls = document.getElementsByClassName('nav');
            var lis = $(".nav li");
            var contents = document.getElementsByClassName('content');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    for (var j = 0; j < contents.length; j++) {
                        contents[j].className = "content";
                    }
                    contents[this.id - 1].className += ' active';
                };
            }
            $('.selectpicker').selectpicker({
                'selectedText': 'cat'
            });
            var spans = $('.project_menu').children();
            console.log(spans);
            var content2 = $('.menu_content');
            for (var i = 0; i < spans.length; i++) {
                spans[i].onclick = function () {
                    for (var j = 0; j < content2.length; j++) {
                        content2[j].className = "menu_content";
                    }
                    content2[this.id - 1].className += ' active';
                };
            }
        });


    </script>
</body>

</html>